<template>
	<el-container>
		<el-header>
			<el-row>
				<el-col :span="1">
					<span><i class="el-icon-s-help" style="text-align: right; font-size: 30px; color: #42acff; padding-top: 13px;"></i></span>
				</el-col>
				<el-col :span="2">
					<span>综合定位平台</span>
				</el-col>
				<el-col :span="17">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
					active-text-color="#00acff">
						<el-menu-item index="1">地图监控</el-menu-item>
						<el-menu-item index="2">实体管理</el-menu-item>
						<el-menu-item index="3">围栏管理</el-menu-item>
						<el-menu-item index="4">系统设置</el-menu-item>
						<el-menu-item index="5"><a href="https://help.qxwz.com/240000" target="_blank">帮助文档</a></el-menu-item>
					</el-menu>
				</el-col>

				<el-col :span="4" style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-user-solid" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><i class="el-icon-guide" style="margin-right: 15px"></i>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>Admin</span>
				</el-col>

			</el-row>

		</el-header>
		<el-main>
			<amap :zoom="11" :center="[117.000923, 36.675807]">
				<amap-marker :position="[117.000923, 36.675807]" />
			</amap>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '4',
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄',
					tag: '家'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄',
					tag: '公司'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄',
					tag: '家'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄',
					tag: '公司'
				}]
			};
		},
		methods: {
			filterTag(value, row) {
				return row.tag === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath + "1");
				if (key == '1') {
					this.$router.push({
						path: '/monitor'
					});
				} else if (key == "2") {

					this.$router.push({
						path: '/entity'
					});
				} else if (key == "3") {
					this.$router.push({
						path: '/fence'
					});
				} else if (key == '4') {
					// this.$router.push({
					// 	path: '/config'
					// });
				}
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		text-align: center;
	}
</style>
